<template>

  <nav class="nav">
    <van-nav-bar
      title="个人中心"
    />
  </nav>

  <div class="informationContainer">

    <!-- information start-->
    <div class="informationArea">
      
      <div class="imgArea"><img class="img" src="../assets/images/headImg.jpg" alt=""></div>
      <div class="contentArea-personal">
        <div class="leftArea">
          <div class="username"><van-icon name="user" class="icon-personal"/>&nbsp;7.<van-icon name="arrow" class="icon-personal"/></div>
          <div class="address"><van-icon name="map-marked" class="icon-personal"/>&nbsp;收货地址<van-icon name="arrow" class="icon-personal"/></div>
        </div>
        <div class="rightArea">
          <div class="settingIcon"><van-icon name="setting" class="icon-personal"/></div>
          <div class="setting">设置<van-icon name="arrow" class="icon-personal"/></div>
        </div>
      </div>

    </div>
    <!-- information end -->

    <!-- orderArea -->
    <order-item-list></order-item-list>

    <!-- discountCouponArea -->
    <discount-coupon></discount-coupon>

    <!-- serveArea -->
    <serve-item-list></serve-item-list>

  </div>

  <!-- goodsArea -->
  <goods-card></goods-card>

</template>

<style>
.nav {
  position: fixed;
  width: 100%;
  top: 0;
}

.informationContainer{
  margin-top: 100px;
}

/* informationArea start */
.informationArea{
  background-color: #fff;
  width: 100%;
  height: 140px;
  display: flex;
  justify-content: space-between;
  font-size: 40px;
}

.informationArea .imgArea{
  padding: 12px;
  align-items: center;
}

.informationArea .img{
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 50%;
}

.contentArea-personal{
  width: 100%;
  padding-left: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.informationContainer .icon-personal{
  color: #888;
}

.leftArea .username{
  text-align: left;
}

.leftArea .address{
  padding-top: 8px;
  color: #888;
  font-size: 28px;
}

.contentArea-personal .rightArea{
  display: flex;
  border: 1px solid #888;
  border-radius: 40%;
  margin-right: 20px;
  padding: 12px;
  line-height: 40px;
  align-items: center;
}

.rightArea .setting{
  font-size: 25px;
  padding-left: 10px;
}

.settingIcon{
  font-size: 40px;
}
/* informationArea end */

</style>


<script>

import OrderItemList from '@/components/OrderItemList.vue';
import ServeItemList from '@/components/ServeItemList.vue';
import DiscountCoupon from '@/components/DiscountCoupon.vue';
import GoodsCard from '@/components/GoodsCard.vue';

export default {

  components: {
    OrderItemList,
    DiscountCoupon,
    ServeItemList,
    GoodsCard,
  },
  data(){
    return {
   
    }
  },


};

</script>
